<template>
	<view class="home">
		<!-- 轮播图 -->
        <view id="swiper">
          <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="#fff" indicator-active-color="#e94d6a" circular="true">
            <swiper-item v-for="item in swiperImagelist" :key="item.id">
                <view class="swiper-item" >
                    <image :src="item.img" @click="toSwiperGoods(item.goodID)"></image>
                </view>
            </swiper-item>
          </swiper>
		  <!-- 搜索框 -->
		  <view id="search">
		  	<icon type="search" size="15" class="search_icon"/>
		  	<input type="text" class="search_input" placeholder="搜索心仪的商品" placeholder-class="search_placeholder" @click="goSearch" disabled></input>
		  </view>
        </view>
				<!-- <button @click="aaaa">111111111111</button> -->
		<!-- 九宫格 -->
		<view id="grid">
	       <uni-grid :options="gridlist" column-num="4" showBorder="false"></uni-grid>
		</view>
		<!-- 今日特惠 -->
		<view id="popular">
		   <view @click="toToday">
			   <image src="../../../static/images/popular_1_03.png">
				   <text>今日必抢</text>
				   <text>限时限量抢</text>
			   </image>
		   </view>
		   <view @click="toPreferential">
			   <image src="../../../static/images/popular_2_03.png">
				   <text>今日特惠</text>
			       <text>大牌限时特卖</text>
			   </image>			  
		   </view>
		</view>
		<!-- 品质爆款 -->
		<view id="Hot_products">
			<image src="../../../static/images/product_banner_02.png" class="product_banner" @click="toExplosiveGoods"></image>
			<explosiveGoods :explosivegoodsDate="explosiveGoodsDate"></explosiveGoods>		
		</view>
		<!-- 商城推荐 -->
		<view id="mall">
			<image src="../../../static/images/Mall_banner_02.png" class="mall_banner" @click="toProductList"></image>
			<productList :goodsDate="productListDate"></productList>
		</view>
	</view>
</template>


<script>
	//引入uni-grid组件
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	//引入商品列表组件
	import productList from "@/components/productList/productList.vue"
	//引入爆款商品组件
	import explosiveGoods from "@/components/explosiveGoods/explosiveGoods.vue"
	export default {
		data() {
			return {
                swiperImagelist:[],
				gridlist:[
					{image:"../../static/images/grid_1_03.png",text:"今日必抢"},
					{image:"../../static/images/grid_2_03.png",text:"今日特惠"},
					{image:"../../static/images/grid_3_03.png",text:"倩碧专场"},
					{image:"../../static/images/grid_4_03.png",text:"邀请领券"},
					{image:"../../static/images/grid_5_03.png",text:"拼团"},
					{image:"../../static/images/grid_6_03.png",text:"砍价"},
					{image:"../../static/images/grid_7_03.png",text:"秒杀"},
					{image:"../../static/images/grid_8_03.png",text:"上新"},
				],
				//商城推荐
				productListDate:"",
				//品质爆款
				explosiveGoodsDate:"",
				//今日必抢
				todayProductList:"",
				//今日特惠
				PreferentialList:"",
				//商品列表数量
				pagesize:8
			}
		},
		onLoad() {
			//加载轮播图数据
			this.getSwiperImage();
			//获取商城推荐数据
			this.getProductList();
			//获取品质爆款数据
			this.getExplosiveGoods();	
			this.getuserinfo();
		},
		methods: {
			aaaa() {
				uni.navigateTo({ url: '/pages/dynamicPage/index' })
			},
			//获取轮播图数据
			getSwiperImage() {
				let that=this;
				uni.request({
					url: this.$store.state.URL + 'banner/banner/get_banner',
					data: {
						bannerType: 'home_page_head',
						quantity: 3
					},
					success(res) {
						that.swiperImagelist=res.data.data;
					},
				})
			},
			//获取爆款商品列表数据
			getExplosiveGoods(){
				let that=this;
				uni.request({
					url:this.$store.state.URL+'goods/good/get_config_goods',
					data:{
						moduleType:"home",
						configType:"hotGoods",
						pagesize:that.pagesize
					},
					success(res) {
						that.explosiveGoodsDate=res.data.list.data;
					}
				})
				
			},
			//获取商城推荐列表数据
			getProductList(){
				//数据加载提示框
				uni.showLoading({
					title: '拼命加载中',
					mask: true
				});
				var that=this;
				uni.request({
					url:this.$store.state.URL+'goods/good/get_config_goods',
					data:{
						moduleType:"home",
						configType:"mallRecommend"
					},
					success(res) {
						that.productListDate=res.data.list.data;
						uni.hideLoading();
					}
				})
			},
			//轮播图商品详情
			toSwiperGoods(id){
				uni.navigateTo({
					url:"../../productDetails/productDetails?id="+id
				})
			},
           //跳转搜索界面
           goSearch(){
			uni.hideKeyboard()
			uni.navigateTo({
				url:"../../home/Search/Search"
			}) 	
           },
		   //跳转商城推荐
		   toProductList(){ 
			   //数据加载提示框
			   uni.showLoading({
			   	title: '拼命加载中',
			   	mask: true
			   });
			   var that=this;
			   uni.request({
			   	url:this.$store.state.URL+'goods/good/get_config_goods',
			   	data:{
			   		moduleType:"home",
			   		configType:"mallRecommend"
			   	},
			   	success(res) {
			   		that.productListDate=res.data.list.data;
					uni.navigateTo({
						url:"../../home/mallRecommendation/mallRecommendation?productListDate="+JSON.stringify(that.productListDate)+"&title=商城推荐"
					})
			   		uni.hideLoading();
			   	}
			   })
		   },
		   //跳转品质爆款
		   toExplosiveGoods(){
		   	   //数据加载提示框
		   	   uni.showLoading({
		   	   	title: '拼命加载中',
		   	   	mask: true
		   	   });
		   	   var that=this;
		   	   uni.request({
		   	   	url:this.$store.state.URL+'goods/good/get_config_goods',
		   	   	data:{
		   	   		moduleType:"home",
		   	   		configType:"hotGoods"
		   	   	},
		   	   	success(res) {
		   	   		that.explosiveGoodsDate=res.data.list.data;
		   	   		uni.navigateTo({
		   	   			url:"../../home/mallRecommendation/mallRecommendation?productListDate="+JSON.stringify(that.explosiveGoodsDate)+"&title=品质爆款"
		   	   		})
		   	   		uni.hideLoading();
		   	   	}
		   	   })
		   },
		   //跳转今日必抢
		   toToday(){
			   //数据加载提示框
			   uni.showLoading({
			   	title: '拼命加载中',
			   	mask: true
			   });
			   let that=this;
			   uni.request({
			   	url:this.$store.state.URL+'goods/good/get_config_goods',
			   	data:{
			   		moduleType:"home",
			   		configType:"panicBuying"
			   	},
			   	success(res) {
			   		that.todayProductList=res.data.list.data;
					uni.navigateTo({
						url:"../../home/mallRecommendation/mallRecommendation?productListDate="+JSON.stringify(that.todayProductList)+"&title=今日必抢"
					})
			        uni.hideLoading();
			   	},
			   })	   		
		   },
		   //跳转今日特惠
		   toPreferential(){
			   //数据加载提示框
			   uni.showLoading({
			   	title: '拼命加载中',
			   	mask: true
			   });
			   let that=this;
			   uni.request({
			   	url:this.$store.state.URL+'goods/good/get_config_goods',
			   	data:{
			   		moduleType:"home",
			   		configType:"preferential"
			   	},
			   	success(res) {
			   		that.PreferentialList=res.data.list.data;
					uni.navigateTo({
						url:"../../home/mallRecommendation/mallRecommendation?productListDate="+JSON.stringify(that.PreferentialList)+"&title=今日特惠"
					})
					uni.hideLoading();
			   	}
			   })
		    },
		    getuserinfo(){
				let self = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function (res) {
						self.$store.commit('getNameImgurl',res.userInfo);
						uni.login({
							provider: 'weixin',
							success: function (loginRes) {
								let code = loginRes.code;
								// 获取用户信息
								uni.request({
									url: self.$store.state.URL+"login/login/mini_login",
									data: {
										code: code
									},
									success(res) {
										console.log(res);
										if(res.data.flag == 1){
											console.log("登陆成功");
											self.$store.commit('updataToken',res.data.token);
										}else if(res.data.flag == 2){
											console.log("登陆成功但没有token");
										}else if(res.data.flag == 0){
											console.log("用户未注册");
										}else{
											console.log("系统错误");
										}
									},
									fail(e){
										console.log(e);
									}
								});
							}
						});
					},
					fail(e){
						console.log(e);
						uni.showLoading({
							mask:true,
							title:"授权登录中"
						});
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}
				})
			}
		},
		components: {
			uniGrid,
			productList,
			explosiveGoods
		},
	}
</script>
  
<style>
	#search{
        position:absolute;
		top:20upx;
		left:64upx;
		z-index: 999;
	}
	.search_placeholder{
		font-size:24upx;
		color:#333;
		opacity: 0.7;
	}
	.search_icon{
		position:absolute;
		margin:15upx 25upx;
	}
	.search_input{
		background:#fff;
		opacity: 0.5;
		width:550upx;
		height:60upx;
		padding-left:35px;
		border-radius: 30upx;
	}
    .swiper {
        height:350upx;
        width: 100%;
    }
    .swiper-item {
        height: 100%;
        width: 100%;
    }
    .swiper-item image {
        height:350upx;
        width:100%;
		border:0;
    }
	#popular{
		display: flex;
        justify-content: space-around;
		height: 303upx;
		background: #fddde3;
	}
	#popular view{
		margin: 23upx 0;
		position: relative;
	}
	#popular text:nth-of-type(1){
		z-index: 999;
		position: absolute;
		top:26upx;
		left:18upx;
		font-size:30upx;
		color:#333;
	}
	#popular text:nth-of-type(2){
		z-index: 999;
		position: absolute;
		font-size:24upx;
		color:#333;
		top:65upx;
		left:18upx;
		opacity: 0.5;
	}
	#popular image{
		width:346upx;
		height:258upx;
	}
	#Hot_products{
		width:100%;
		height:auto;
		background: #fedae1;
		margin-top:30upx;
	}
	.product_banner{
		width:100%;
		height:202upx;
	}
	#mall{
		margin-top: 30upx;
		background:#f5f5f5;
	}
	.mall_banner{
		width:100%;
		height:202upx;
	}
</style>